<template>
  <page-header-wrapper :title="false">
    <a-card title="其他客户领取统计">
      <a-tabs type="card">
        <a-tab-pane key="1" tab="总数统计">
          <div class="table-page-search-wrapper">
            <a-form-model :model="queryParam" layout="inline">
              <a-row :gutter="20">
                <a-col v-if="groupType == 'big_leader'" :md="6" :sm="24">
                  <a-form-model-item label="所属组长">
                    <a-select
                      mode="multiple"
                      :filter-option="filterOption"
                      v-model="queryParam.leader_uid"
                      placeholder="请选择所属组长"
                    >
                      <a-select-option v-for="(item,index) in leaderOpts" :key="index" :value="index">{{item}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-model-item label="顾问姓名">
                    <a-select
                      v-model="queryParam['filter[adviser_uid]']"
                      placeholder="请选择顾问姓名"
                    >
                      <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <template v-if="advanced">
                  <a-col :md="6" :sm="24">
                    <a-form-model-item label="月份筛选">
                      <a-select
                        v-model="queryParam['filter[type]']"
                        placeholder="请选择月份筛选"
                      >
                        <a-select-option value="today">本日</a-select-option>
                        <a-select-option value="month">本月</a-select-option>
                        <a-select-option value="last_month">上月</a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :md="6" :sm="24">
                    <a-form-model-item label="日期筛选">
                      <a-range-picker @change="onChange" />
                    </a-form-model-item>
                  </a-col>
                </template>
                <a-col :md="6" :sm="24">
                      <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                        <a-button type="primary" @click="$refs.table.refresh()">查询</a-button>
                        <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                          {{ advanced ? '收起' : '展开' }}
                          <a-icon :type="advanced ? 'up' : 'down'"/>
                        </a>
                      </span>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
          <div class="table-operator">
            <s-table
              bordered
              ref="table"
              size="middle"
              :row-key="(record) => record.id"
              :columns="stateColumns"
              :data="stateData"
            >
              <div
                slot="filterDropdown"
                slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                style="padding: 8px"
              >
                <a-input
                  v-ant-ref="c => (searchInput = c)"
                  :placeholder="`搜索${column.title}`"
                  :value="selectedKeys[0]"
                  style="width: 188px; margin-bottom: 8px; display: block;"
                  @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                  @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                />
                <a-button
                  type="primary"
                  icon="search"
                  size="small"
                  style="width: 90px; margin-right: 8px"
                  @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
                >
                  搜索
                </a-button>
                <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
                  重置
                </a-button>
              </div>
              <div slot="footer">
                <a-row type="flex">
                  <a-col flex="150px">
                    <p>汇总</p>
                  </a-col>
                  <a-col flex="135px"></a-col>
                  <a-col flex="135px"><a-tag color="red">{{totalCount.kjCount}}</a-tag></a-col>
                  <a-col flex="135px"><a-tag color="red">{{totalCount.bhCount}}</a-tag></a-col>
                  <a-col flex="135px"><a-tag color="red">{{totalCount.sdCount}}</a-tag></a-col>
                  <a-col flex="135px"><a-tag color="red">{{totalCount.sjCount}}</a-tag></a-col>
                  <a-col flex="135px"><a-tag color="red">{{totalCount.zlCount}}</a-tag></a-col>
                  <a-col flex="135px"><a-tag color="red">{{totalCount.xzCount}}</a-tag></a-col>
                  <a-col flex="157px"><a-tag color="red">{{totalCount.bgCount}}</a-tag></a-col>
                  <a-col flex="157px"><a-tag color="red">{{totalCount.yjwCount}}</a-tag></a-col>
                  <a-col flex="120px"><a-tag color="red">{{totalCount.jwCount}}</a-tag></a-col>
                </a-row>
              </div>
              <template slot="accounting" slot-scope="text">
                <a-tag >{{ text }}</a-tag>
              </template>
              <template slot="reject" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="notice" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="iso" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="ptyp" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="tme" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="tmc" slot-scope="text">
                <a-tag>{{ text }}</a-tag>
              </template>
              <template slot="wechat" slot-scope="text, record">
                <a-button icon="eye" type="link" @click="onLook(record.id)">{{text}}</a-button>
              </template>
            </s-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="循环统计">
          <div class="table-operator">
            <s-table
              bordered
              ref="table3"
              size="middle"
              :row-key="(record,index) => index"
              :columns="forColumns"
              :data="forData"
            >
              <template slot="first_type" slot-scope="text">
                <a-tag color="red">{{typeOpts[text]}}</a-tag>
              </template>
              <template slot="action" slot-scope="text,record">
                <a-button size="small" type="danger" @click="onDel(record.first_type)">全部删除</a-button>
              </template>
            </s-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-modal
      title="微信列表"
      v-model="visible"
      :footer="null"
    >
      <a-table
        bordered
        size="small"
        :row-key="(record) => record.id"
        :columns="wechatColumns"
        :data-source="wechatData"
      >
        <template slot="tm_name" slot-scope="text, record">
          {{text}}{{record.pt_name}}
        </template>
        <template slot="phone" slot-scope="text, record">
          {{text}}<span v-if="record.phone2">/{{record.phone2}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal>
      <a-table></a-table>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import storage from 'store'
import { STable } from '@/components'
import customerColumns from '@/columns/customer'
import { getLoopState, getPreWechat, getTotalState, delAllOther } from '@/api/customer'

export default {
  components: {
    STable
  },
  name: 'OtherState',
  data () {
    return {
      searchInput: null,
      searchText: '',
      advanced: true,
      queryParam: {},
      visible: false,
      adviserOpts: {},
      leaderOpts: {},
      totalCount: {},
      typeOpts: {},
      stateColumns: customerColumns.state,
      stateData: parameters => {
        return getTotalState(Object.assign(parameters, this.queryParam)).then(res => {
          this.adviserOpts = res.result.adviser_array
          this.leaderOpts = res.result.leader_array
          this.totalCount = res.result.dataCount
          return res.result
        })
      },
      wechatColumns: customerColumns.wechat,
      // wechatData: parameters => {
      //   return getPreWechat(parameters).then(res => {
      //     return res.result
      //   })
      // },
      wechatData: [],
      forColumns: customerColumns.for_state,
      forData: parameters => {
        return getLoopState(Object.assign(parameters, this.queryParam1)).then(res => {
          this.typeOpts = res.result.typeOpts
          return res.result
        })
      },
      groupType: storage.get('GROUP')
    }
  },
  created () {
    this.queryParam['page_size'] = 20
  },
  methods: {
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset (clearFilters, dataIndex) {
      clearFilters()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onChange (date, dateString) {
      this.queryParam['filter[begin_received_at]'] = dateString[0]
      this.queryParam['filter[end_received_at]'] = dateString[1]
    },
    onLook (id) {
      this.queryParam['filter[uid]'] = id
      getPreWechat(id).then(res => {
        this.wechatData = res.result.data
      })
      this.visible = true
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    onDel (type) {
      this.$confirm({
        title: '删除当前类型已领取/未领取的全部大客户资源',
        onOk: () => {
          delAllOther(type).then(res => {
            this.$refs.table3.refresh(true)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
